<template>
  <div class="container">
    <div class="row mt-2">
      <div class="btn-group mybutton" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-dark " @click="getWritingList('')" >热门</button>
        <button type="button" class="btn btn-dark" @click="getWritingList('3')">抖音热文</button>
        <button type="button" class="btn btn-dark" @click="getWritingList('2')">励志</button>
        <button type="button" class="btn btn-dark" @click="getWritingList('1')">伤感</button>
        <button type="button" class="btn btn-dark" @click="getWritingList('4')">思念</button>
        <button type="button" class="btn btn-dark" @click="getWritingList('5')">回忆</button>
        <button type="button" class="btn btn-dark" @click="getWritingList('6')">心酸</button>
      </div>
    </div>
    <div class="row" v-for="item in list " :key="item.id">
      <div class="card " style="width: 100rem;">
        <div class="mycard">
          <div class="card-body">
            {{item.content}}
          </div>
          <div style="padding:15px" >
            <button type="button" class="btn btn-success " @click="copy(item.content)">复制</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listStore: this.newStore(),
      list: [],
    };
  },
  components: {
  },
  created() {
    this.getWritingList();
  },
  methods: {
    getWritingList(type) {
      this.spost(this.listStore, '/CopyWriting/getList', { type }).then((res) => {
        this.list = res.d.List;
      });
    },
    async copy(content) {
      try {
        await navigator.clipboard.writeText(content);
        this.$message.success('复制成功');
      } catch (err) {
        console.error('Failed to copy: ', err);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.mycard{
  display:flex;
  align-items: center;
}
.mybutton{
 button{
   margin: 0 5px 3px 0;
  //  border-radius: 10px;
 }
}

</style>
